<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>秒表计时器</title>
    <style>
        #showTime {
            width: 300px;
            height: 60px;
            font-size: 60px;
            line-height: 60px;
        }
    </style>
</head>

<body>
    <div>
        <div id="showTime">00:00:00</div>
        <button id="startBn">开始</button>
        <button id="restBn">重置</button>
    </div>
    <script>
        var time, showTime, startBn, restBn, pauseDate;
        var bool = false;//布尔开关
        var pauseTime = 0;//暂停的累计时间

        //获取需要的DOM结构
        init();
        function init() {
            showTime = document.getElementById("showTime");//获取要计时的时间
            startBn = document.getElementById("startBn");//获取开始时间
            restBn = document.getElementById("restBn");//获取结束时间
            startBn.addEventListener("click", clickHandler);//开始按钮 ~ 暂停按钮
            restBn.addEventListener("click", clickHandler);//重置按钮
            setInterval(animation, 16);
        }
        //转化时间函数   1秒=1000毫秒
        function animation() {
            if (!bool) return;
            //当前时间减去上次开启时间减去暂停累计时间
            var times = new Date().getTime() - time - pauseTime;
            var minutes = Math.floor(times / 60000);//毫秒转化为分钟
            var seconds = Math.floor((times - minutes * 60000) / 1000);//将time减去分钟 除去1000得出 秒
            var ms = Math.floor((times - minutes * 60000 - seconds * 1000) / 10);
            showTime.innerHTML =//动态刷新时间
                (minutes < 10 ? "0" + minutes : minutes) + ":"
                + (seconds < 10 ? "0" + seconds : seconds) + ":"
                + (ms < 10 ? "0" + ms : ms);
        }

        //点击时的事件
        function clickHandler(e) {
            e = e || window.event;
            if (this === startBn) {
                bool = !bool;
                if (bool) {
                    this.innerHTML = "暂停";
                    //如果上一次暂停时间是空，表示没有暂停过，因此，直接返回0
                    //如果上次的暂停时间是有值得，用当前毫秒数减去上次的毫秒数，这样就会得到暂停时间
                    pauseTime += (!pauseDate ? 0 : new Date().getTime() - pauseDate);
                    if (time) return;
                    time = new Date().getTime();
                    return;//是为bool判断跳出   返回值：布尔值
                }

                this.innerHTML = "开始";
                pauseDate = new Date().getTime();
                return;//是为this是否等于startBn判断跳出
            }
            startBn.innerHTML = "开始";
            pauseTime = 0;
            pauseDate = null;
            bool = false;
            time = 0;
            showTime.innerHTML = "00:00:00";
        }

    </script>
</body>

</html>